<template>
  <div class="missionDetail">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <!-- <van-swipe-item
        ><img
          src="https://ts1.cn.mm.bing.net/th/id/R-C.6530043d62aeb651f24bfc189500ef16?rik=p5CEelJZ11aDng&riu=http%3a%2f%2f5b0988e595225.cdn.sohucs.com%2fimages%2f20200122%2fe18a6f5f7c67438692fe5b2e984c0a2d.JPG&ehk=7KwnUM22rt8iUvaGTI2slDUbP8J2paTsIUJmmJtwnPY%3d&risl=&pid=ImgRaw&r=0"
          alt=""
      /></van-swipe-item> -->
      <van-swipe-item
        ><img
          :src="materialData[0]?.img"
          alt=""
      /></van-swipe-item>
    </van-swipe>
    <div class="missionInfo">
      <div class="infoTop">
        <div class="infoTit">{{materialData.type}}</div>
        <div class="woker">操作人：李东旭</div>
      </div>
      <div
        class="materialList"
        v-show="item.itemName"
        v-for="(item, index) in materialData"
        :key="index"
      >
        <div class="itemName">{{ item.itemName }}</div>
        <div class="itemNum">{{ item.itemNum }}</div>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { Swipe, SwipeItem } from 'vant'

Vue.use(Swipe)
Vue.use(SwipeItem)
export default {
  data () {
    return {
      materialData: [
        { name: '复合微生物菌肥', num: '56 公斤' },
        { name: '住商微生物有机肥', num: '100 公斤' },
        { name: '富明微生物有机肥', num: '12 公斤' }
      ]
    }
  },
  created () {
    this.materialData = JSON.parse(this.$route.query.materialData)
  }
}
</script>
<style lang="scss" scoped>
.missionDetail {
  padding: 16px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  // line-height: 150px;
  text-align: center;
  // background-color: #39a9ed;
  // height: 457px;
  img {
    width: 338px;
    // height: 457px;
  }
}
.missionInfo {
  width: 343px;
  // height: 188px;
  background: #ffffff;
  border-radius: 15px;
  border: 1px solid #e8f8ef;
  padding: 16px;
  margin-top: 32px;
  margin-bottom: 16px;
  .infoTop {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    .infoTit {
      width: 32px;
      height: 24px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 16px;
      color: #333333;
      line-height: 24px;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }
  .materialList {
    display: flex;
    justify-content: space-between;
    width: 311px;
    height: 28px;
    background: #e8f8ef;
    border-radius: 4px;
    color: #19b560;
    line-height: 28px;
    margin-bottom: 4px;
    padding: 0 4px;
  }
}
</style>
